<template>
    <el-popover trigger="click" effect="light" placement="left">
        <div class="tooltip-content">
            <div class="title">{{ title }}</div>
            <div v-for="item in showProps" :key="item + detail.id" class="row">
                <div class="label">
                  <el-tag effect="plain" type="info" size="mini" style=" font-weight: bold;color: #1850ab ;">{{
                        item
                    }}</el-tag>
                </div>
                <div @click="copyToClipboard(detail[item])" class="value">
                    {{ detail[item] }}
                </div>
            </div>
        </div>
        <el-button :style="btnStyle" slot="reference" class="btn" size="mini"
            >{{ btnName }}({{ addressNum(detail) }})</el-button
        >
    </el-popover>
</template>

<script>
import { copyToClipboard } from "@/utils/index";
export default {
    props: {
        btnName: {
            type: String,
            default: "查看更多",
        },
        btnStyle: {
            type: String,
            default: "",
        },
        detail: {
            type: Object,
            default: {},
        },
        title: {
            type: String,
            default: "",
        },
        showProps: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            visible: false,
        };
    },
    methods: {
        copyToClipboard,
        addressNum(record) {
            // 计算对象中存在的属性数量
            let count = 0;
            for (const prop of this.showProps) {
                if (prop in this.detail && !!this.detail[prop]) {
                    count++;
                }
            }
            return count;
        },
    },
};
</script>

<style lang="scss" scoped>
.title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
.tooltip-content{
  color: black ;
}
.row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    min-width: 300px;
    .label {
        width: 40%;
    }
    .value {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        text-overflow: ellipsis;
        .btn {
            border-style: dashed;
        }
    }
}
</style>